<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/7/6
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<html>
<head>
    <title>供应商列表</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
    <div id="root">

        <Collapse value="1">
            <Panel name="1">
                条件查询
                <p slot="content">
                    <i-form :label-width="80" inline>
                        <Form-Item  label="品牌">
                            <i-Select v-model="supplierVo.brandId" clearable  style="width: 120px;" >
                                <i-Option v-for="item in brandList" :value="item.id" :key="item.id" v-if="item.showStatus==1">{{item.name}}</i-Option>
                            </i-Select>
                        </Form-Item>
                        <Form-Item label="供应商名称" >
                            <i-input v-model="supplierVo.name"></i-input>
                        </Form-Item>
                        <Form-Item label="信用等级">
                            <i-Select v-model="supplierVo.creditId" clearable  style="width: 120px;">
                                <i-Option v-for="item in creditList" :value="item.id" :key="item.id">{{item.creditName}}</i-Option>
                            </i-Select>
                        </Form-Item>

                        <i-button type="primary" @click="pageNo=1;getList();">搜索</i-button>
                    </i-form>
                </p>
            </Panel>
        </Collapse>


        <Card style="margin: 20px 0" dis-hover>

            <Icon type="ios-film-outline"></Icon>
            数据列表
            <shiro:hasPermission name="sup:add">
                <i-button type="info" @click="add" :style="{float:'right'}">添加</i-button>
            </shiro:hasPermission>
        </Card>
        <Modal v-model="addModal" title="添加供应商" @on-ok="doadd('supplier')" @on-cancel="" width="800px">
            <i-Form ref="supplier" :model="supplier" :label-width="100" :rules="ruleValidate">
                <Form-Item  label="品牌" prop="brand">
                    <i-Select v-model="supplier.brandId" clearable  style="width: 120px;" >
                        <i-Option v-for="item in brandList" :value="item.id" :key="item.id" v-if="item.showStatus==1">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item prop="name" label="供应商名称">
                    <i-Input type="text" v-model="supplier.name" ></i-Input>
                </Form-Item>
                <form-Item prop="contacts" label="供应商联系人">
                    <i-Input type="text" v-model="supplier.contacts" ></i-Input>
                </form-Item>
                <Form-Item prop="phone" label="联系电话">
                    <i-Input type="text" v-model="supplier.phone"></i-Input>
                </Form-Item>
                <Form-Item  label="备注">
                    <i-Input type="text" v-model="supplier.remarks" ></i-Input>
                </Form-Item>
            </i-Form>
        </Modal>


        <i-table :columns="columns" :data="data" @on-selection-change="tableSelect=arguments[0]" border stripe height="400" >
            <template slot-scope="{row,index}" slot="brand">
                {{row.brand.name}}
            </template>
            <template slot-scope="{row,index}" slot="credit" >
                {{row.credit.creditName}}
            </template>
            <template slot-scope="{row,index}" slot="state">
                <shiro:hasPermission name="sup:update">
                    <i-switch :value="row.state === 1?true:false" @on-change="change(row)">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </shiro:hasPermission>
                <shiro:lacksPermission name="sup:update">
                    <i-switch :value="row.state === 1?true:false" disabled @on-change="change(row)">
                        <span slot="open">开</span>
                        <span slot="close">关</span>
                    </i-switch>
                </shiro:lacksPermission>
            </template>
            <template slot-scope="{row,index}" slot="action">
                <i-Button type="info" size="large" @click="view(row)">查看</i-Button>
            <shiro:hasPermission name="sup:update">
                <i-Button type="info" size="large" @click="update(row)">修改</i-Button>
            </shiro:hasPermission>
            </template>
        </i-table>
        <template>
            <Page :total="total1"
                  show-elevator
                  :page-size="pageSize"
                  :current.sync="pageNo"
                  show-total
                  show-sizer
                  :page-size-opts="[5,10,15,20]"
                  style="margin-left: 30%;"
                  @on-page-size-change="pageSize=arguments[0];getList();"
                  @on-change="getList"/>
        </template>
        <Modal v-model="updatemodal" title="修改" @on-ok="doupdate('supplier')" @on-cancel="" width="800px">
            <i-Form  ref="supplier" :model="supplier" :label-width="100" :rules="ruleValidate">
                <Form-Item  label="品牌" >
                    <i-Select v-model="supplier.brandId" clearable disabled style="width: 120px;">
                        <i-Option v-for="item in brandList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item prop="name"  label="供应商名称">
                    <i-Input type="text" v-model="supplier.name"></i-Input>
                </Form-Item>


                <Form-Item prop="contacts" label="联系人">
                    <i-Input type="text" v-model="supplier.contacts"></i-Input>
                </Form-Item>
                <Form-Item  prop="phone" label="联系电话">
                    <i-Input type="text" v-model="supplier.phone" ></i-Input>
                </Form-Item>
                <Form-Item label="信用等级">
                    <i-Select v-model="supplier.creditId" clearable  style="width: 120px;">
                        <i-Option v-for="item in creditList" :value="item.id" :key="item.id">{{item.creditName}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="备注">
                    <i-Input type="text" v-model="supplier.remarks" ></i-Input>
                </Form-Item>
            </i-Form>
        </Modal>
        <Modal v-model="modal1" title="查看商品" @on-ok="" @on-cancel="" width="900px">
            <h2 style="margin: 20px;">{{supplier.name}}下的商品：
                <shiro:hasPermission name="supcom:add">
                    <i-button type="info" @click="addCom" :style="{float:'right'}">添加</i-button>
                </shiro:hasPermission>
            </h2>

            <i-table :columns="columns2" :data="data2" @on-selection-change="tableSelect=arguments[0]" border stripe :height="cd">
                <template slot-scope="{row,index}" slot="brand">
                    {{row.brand.name}}
                </template>
                <template slot-scope="{row,index}" slot="supplier">
                    {{row.supplier.name}}
                </template>
                <template slot-scope="{row,index}" slot="sort">
                    {{row.sort.sortName}}
                </template>
                <template slot-scope="{row,index}" slot="action">
                    <shiro:hasPermission name="supcom:update">
                        <i-Button type="success" size="large" @click="updatecom(row)">修改</i-Button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="supcom:del">
                        <i-Button type="error" size="large" @click="delcom(row)">删除</i-Button>
                    </shiro:hasPermission>
                </template>
            </i-table>
        </Modal>
        <Modal v-model="addComModal" title="添加商品" @on-ok="doaddCom" @on-cancel="" >
            <i-Form :label-width="100">
                <Form-Item  label="品牌" prop="brand">
                    <i-Select v-model="supCom.brandId" clearable disabled style="width: 200px;">
                        <i-Option v-for="item in brandList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item prop="name"  label="供应商">
                    <i-Select v-model="supCom.supplierId" clearable disabled style="width: 200px;">
                        <i-Option v-for="item in data" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="商品名称">
                    <i-Input type="text" v-model="supCom.name" ></i-Input>
                </Form-Item>
                <Form-Item  label="分类">
                    <i-Select v-model="supCom.sortId" clearable  style="width: 120px;" >
                        <i-Option v-for="item in sortList" :value="item.id" :key="item.id" >{{item.sortName}}</i-Option>
                    </i-Select>
                </Form-Item>
            </i-Form>
        </Modal>
        <Modal v-model="updateComModal" title="修改商品" @on-ok="doupdateCom" @on-cancel="" width="800px">
            <i-Form :label-width="100">
                <Form-Item  label="品牌" prop="brand">
                    <i-Select v-model="supCom.brandId" clearable disabled style="width: 200px;">
                        <i-Option v-for="item in brandList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item prop="name"  label="供应商">
                    <i-Select v-model="supCom.supplierId" clearable disabled style="width: 120px;" >
                        <i-Option v-for="item in data" :value="item.id" :key="item.id" >{{item.name}}</i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="商品名称">
                    <i-Input type="text" v-model="supCom.name" ></i-Input>
                </Form-Item>
                <Form-Item  label="分类">
                    <i-Select v-model="supCom.sortId" clearable  style="width: 120px;" >
                        <i-Option v-for="item in sortList" :value="item.id" :key="item.id" >{{item.sortName}}</i-Option>
                    </i-Select>
                </Form-Item>
            </i-Form>
        </Modal>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {title:"品牌",slot:"brand",align: 'center',},
                {title:"名称",key:"name"},
                {title:"联系人",key:"contacts",align: 'center',},
                {title:"联系人电话",key:"phone"},
                {title:"信用等级",slot:"credit",width:"110",align: 'center',},
                {title:"状态",slot:"state",align: 'center',width:"120"},
                {title:"备注",key:"remarks"},
                {title:"操作",slot:"action"},
            ],
            columns2:[
                {title:"品牌",slot:"brand"},
                {title:"供应商",slot:"supplier"},
                {title:"分类",slot:"sort"},
                {title:"商品名",key:"name"},
                {title:"操作",slot:"action"},
            ],
            data: [],
            data2: [],
            total1:{},
            pageSize:5,
            pageNo:1,
            modal1:false,
            supplier:{},
            supplierVo:{},
            cd:{},
            brandList:{},
            addModal:false,
            addComModal:false,
            updateComModal:false,
            supCom:{},
            sortList:{},
            updatemodal:false,
            creditList:{},
            // supplierList:{},
            ruleValidate: {
                phone: [
                    { required: true, message: "请输入手机号码", trigger: "blur" },

                    { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }
                ],
                name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
                contacts: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
                brand: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
            },


        },

        mounted(){
            this.getList();
            this.getbrand();
            this.getsort();
            this.getcredit();
        },
        methods: {
            change(row){
                if(row.state==0){
                    row.state=1;
                }else if(row.state==1){
                    row.state=0;
                }
                this.supplier = row;
                axios.post("/sup/sup/update",this.supplier).then(
                    ({data})=>{
                        if(data.code==1000){
                            if(data.code){
                                iview.Message.success({content:data.msg});
                                this.getList();
                            }else{
                                iview.Message.error({content:data.msg});
                            }
                        }
                    }
                )
            },
            delcom(row){
                let _this = this;
                iview.Modal.confirm({
                    title: "您确定要删除吗？",
                    content: "此操作是不可逆的",
                    onOk() {
                        axios.get("/sup/sup/delcom?id=" + row.id).then(
                            ({data}) => {
                                if (data.code == 1000) {
                                    iview.Message.success({content: data.msg});
                                    _this.getsupList();
                                } else {
                                    iview.Message.error({content: data.msg});
                                }
                            }
                        )
                    },
                })
            },
            getcredit(){
                axios.post("/sup/sup/getcredit").then(
                    ({data})=>{
                        this.creditList = data.result;
                    }
                )
            },
            doupdate(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post("/sup/sup/update",this.supplier).then(
                            ({data})=>{
                                if(data.code==1000){
                                    if(data.code){
                                        iview.Message.success({content:data.msg});
                                        this.getList();
                                    }else{
                                        iview.Message.error({content:data.msg});
                                    }
                                }
                            }
                        )
                    } else {
                        this.$Message.error('格式不对!');
                    }
                })
            },
            view(row){
                this.supplier = row;
                this.getsupList();
                this.modal1 = true;
            },
            add(){
                this.supplier = {};
                this.addModal = true;
            },
            update(row){
                this.supplier = row;
                this.updatemodal = true;
            },
            doadd(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post("/sup/sup/add",this.supplier).then(
                            ({data})=>{
                                if(data.code==1000){
                                    if(data.code){
                                        iview.Message.success({content:data.msg});
                                        this.getList();
                                    }else{
                                        iview.Message.error({content:data.msg});
                                    }
                                }
                            }
                        )
                    } else {
                        this.$Message.error('格式不对!');
                    }
                })

            },
            getList(){
                axios.post(`/sup/sup/list/${this.pageSize}/${this.pageNo}`,this.supplierVo).then(
                    ({data})=>{
                        this.data = data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            getsupList(){
                axios.post(`/sup/sup/suplist/${this.supplier.id}`).then(
                    ({data})=>{
                        this.data2 = data.result;
                        if(data.cd==0){
                            this.cd = 80
                        }else{
                            this.cd = data.cd*100+80;
                        }
                    }
                )
            },
            getbrand(){
                axios.post("/sys/brand/brandlist").then(
                    ({data})=>{
                        this.brandList = data.result;
                    }
                )
            },
            addCom(){
                this.supCom={};
                this.supCom.brandId = this.supplier.brandId;
                this.supCom.supplierId = this.supplier.id;
                this.addComModal = true;
            },
            doaddCom(){
                axios.post("/sup/sup/addCom",this.supCom).then(
                    ({data})=>{
                        if(data.code==1000){
                            if(data.code){
                                iview.Message.success({content:data.msg});
                                this.getsupList();
                            }else{
                                iview.Message.error({content:data.msg});
                            }
                        }
                    }
                )
            },
            updatecom(row){
                this.supCom=row;
                this.supCom.supplierId = this.supplier.id;
                this.updateComModal=true;
            },
            doupdateCom(){
                axios.post("/sup/sup/updateCom",this.supCom).then(
                    ({data})=>{
                        if(data.code==1000){
                            if(data.code){
                                iview.Message.success({content:data.msg});
                                this.getsupList();
                            }else{
                                iview.Message.error({content:data.msg});
                            }
                        }
                    }
                )
            },
            getsort(){
                axios.post("/sys/cla/sortlist").then(
                    ({data})=>{
                        this.sortList = data.result;
                    }
                )
            },
        }
    })
</script>
</html>
